
<template>
  <div class="warpc">
    <!-- 头部导航 -->
    <TopBarma />
    <!-- 全部滑动条 -->
    <div class="allbox">
      <div class="all">
        <p class="up">全部</p>
        <p class="upp">停车</p>
        <p class="upp">包厢</p>
        <p class="upp">外带</p>
      </div>
    </div>
    <!-- 问答 -->
    <!-- 数据mock sanswer-->
    <div class="contentask" v-for="(v, i) in arr" :key="i">
      <div class="oneline">
        <div>
          <span class="oneask">问</span>
          <span class="askcont">{{ v.tittle }}</span>
        </div>
        <span class="asknum">9 个问答</span>
      </div>
      <div class="twoline">
        <div class="answer">
          <span class="da">答</span>
          <div class="answercont">
            <div class="answercontimg">
              <img src="mayingshuang/imgs/women.jpg" alt="" />
              <span>兔子</span>
              <img src="mayingshuang/imgs/lv4.jpg" alt="" /><span class="assed"
                >评价后回答</span
              >
            </div>
            <span>{{ v.tittle2 }}</span>
          </div>
        </div>
        <div class="dz">
          <span class="iconfont icon-dianzan"></span>
        </div>
      </div>
    </div>
    <!-- 数据结束 -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    axios.request("http://localhost:8889/Sanswer").then((ok) => {
      console.log(ok);
      this.arr = ok.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.warpc {
  width: 100%;
  .allbox {
    width: 100%;
    .all {
      margin: auto;
      width: 91.733vw;
      display: flex;
      text-align: center;
      line-height: 7.2vw;
      margin-top: 2.4vw;
      font-size: 2.4vw;
      .up {
        width: 13.333vw;
        height: 7.2vw;
        border-radius: 2.667vw;
        background-color: #ffeee7;
        color: #f68f7e;
        margin-right: 1.333vw;
      }
      .upp {
        width: 13.333vw;
        height: 7.2vw;
        border-radius: 2.667vw;
        background-color: #f6f6f6;
        // color: #f68f7e;
        margin-right: 1.333vw;
      }
    }
  }

  .contentask {
    margin: auto;
    width: 90%;
    // background: green;
    line-height: 6.667vw;
    font-size: 3.2vw;
    padding-bottom: 5.333vw;
    border-bottom: 0.267vw solid #f2f2f2;
    margin-top: 4.267vw;

    .oneline {
      display: flex;
      justify-content: space-between;

      .oneask {
        color: #fff;
        padding: 0.8vw;
        background: #f66c38;
      }
      .askcont {
        font-weight: bold;
        font-size: 3.733vw;
        padding-left: 1.6vw;
      }
      .asknum {
        color: #c3c3c3;
      }
    }
    .twoline {
      margin-top: 4.267vw;
      display: flex;
      justify-content: space-between;

      .answer {
        display: flex;
        .da {
          color: #fff;
          padding: 0.8vw;
          background: #7db2d9;
          height: 4.507vw;
          line-height: 4.507vw;
        }
        .answercont {
          padding-left: 1.6vw;
          .answercontimg {
            display: flex;
            img {
              width: 5.333vw;
              height: 6.133vw;
              border-radius: 4.267vw;
              vertical-align: middle;
              padding: 0 1.067vw;
            }
            .assed {
              font-size: 2.667vw;
              // padding: 0.8vw;
              margin-top: 1.6vw;
              text-align: center;
              width: 16vw;
              height: 4vw;
              line-height: 4vw;
              border: 0.267vw solid #e8a298;
              color: #e8a298;
            }
          }
        }
      }
    }
  }
}
</style>